<template>
	<div>
		<div style="display: flex;height: 100%;">
			<base-layout title="三方系统设置" ref="othertablePage" :selectTable="selectTable" @pageChange="pageChange"
				style="flex:1" @onFuncBtn="getFuncBtn" :isPage="true">

				<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
					<base-table ref="othertable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
						@radioChange="radioChange" :slotrow="true" :tableHeight="tableHeight" :tableData="tableData"
						:tableColumn="tableColumn">
						<template v-slot:state="{ row }">
							<el-switch style="display: block" v-model="row.row.state" active-color="#13ce66"
								:active-value="1" :inactive-value="0" @change="lockState(row.row)">
							</el-switch>
						</template>
					</base-table>
				</div>
			</base-layout>
		</div>

		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="addDialog"
			:footerShow="true" @handleConfirmClick="handleAddDialogDetails"
			:title="dialogType == 'add' ? '新增第三方系统信息' : '编辑第三方系统信息'" width="800px" top="20vh">
			<base-form ref="customForm" :formRow="formRow" :isFunBtn="false" :rules="rules">
			</base-form>
		</base-dialog>
		<!-- 选择人员
		<base-person ref="basePerson" :menuData="menuData" :tableColumn="personColumn"
			@personConfirmClick="personConfirmClick"></base-person> -->
	</div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseForm from "@/components/base/baseNewForm/index.vue";
import { GetDataSourcePerson, } from "@/api/apis/documentManagement";
import { OtherGetBillList, OtherSaveData, DelData, LockState } from '@/api/apis/tripleSet'
export default {
	name: "triopleSet",
	components: {
		baseLayout,
		baseTable,
		baseDialog,
		baseForm,
	},
	data() {
		return {
			tabLoading: false,
			tableData: [],
			selectTable: [],
			dialogType: '',
			// 搜索配置
			addDialog: false,
			sort: true,
			state: '',
			tableColumn: [
				{
					label: "唯一id",
					prop: "billid",
				},
				{
					label: "系统名称",
					prop: "sysName",
				}, {
					label: "系统链接",
					prop: "sysLink",
				}, {
					label: "系统图标",
					prop: "sysIcon",
				}, {
					label: "系统描述",
					prop: "sysRemark",
				}, {
					label: "启用状态",
					prop: "state",
				},
			],
			formRow: [
				{
					elCol: [{
						label: '系统名称',
						prop: 'sysName',
						tag: 'elInput',
					},
					{
						label: '系统描述',
						prop: 'sysRemark',
						tag: 'elInput',
						// placeholder:'自动带入',
						// disabled:true
					},
					]
				},
				{
					elCol: [{
						label: '系统图标',
						prop: 'sysIcon',
						tag: 'elInput',

					},
					{
						label: '系统地址链接',
						prop: 'sysLink',
						tag: 'elInput',
						// placeholder:'自动带入',
						// disabled:true
					},
					]
				},
				{
					elCol: [{
						label: '排序',
						prop: 'sort',
						tag: 'elInputNumber',

					},
					]
				},
			],
			rules: {
				sysRemark: [
					{
						required: true,
						message: "请输入系统描述",
						trigger: "blur",
					},
				], sysName: [
					{
						required: true,
						message: "请输入系统名称",
						trigger: "blur",
					},
				], sysIcon: [
					{
						required: true,
						message: "请选择系统图标",
						trigger: "blur",
					},
				], sysLink: [
					{
						required: true,
						message: "系统地址链接",
						trigger: "blur",
					},
				],
			},
			selectTableData: {},
			pageModel: { page: 1, limit: 20, SequenceName: '', Sequence: '' },
		}
	},
	watch: {
		addDialog: {
			deep: true, //深度监听设置为 true
			handler: function (newV, oldV) {
				if (newV == false) {
					// this.formRow[0].elCol[0].disabled = false
					this.$nextTick(() => {
						this.$refs.customForm.resetFields('ruleForm')
						this.$refs.othertablePage.pageClear()
					})
				}
			}
		},
	},
	mounted() {
		this.initPage()
	},
	methods: {
		// 初始化页面
		initPage() {
			this.getTableList()
		},
		// 获取用户信息列表
		async getTableList() {
			this.tabLoading = true
			this.tableData = []
			let params = {
				...this.pageModel
			}
			let res = await OtherGetBillList(params)
			if (res.code == 1) {
				this.$nextTick(() => {
					this.tableData = res.data[1]
					this.$refs.othertablePage.setPageTotal(res.data[0])

					this.$refs.othertable.clearRadioIndex()
					this.selectTableData = {}
				})
			}
			// if (this.sort) {
			// 	const el = await GetDataSourcePerson({ billKindID: '166' })
			// 	if (el.code == 1) {
			// 		this.tableColumn = el.data[1].length == 0 ? el.data[0] : el.data[1]
			// 		this.allField = el.data[0]
			// 		this.tableColumn.forEach(el => {
			// 			el.tooltip = true
			// 		});
			// 	}
			// 	this.sort = true
			// }
			this.tabLoading = false
		},
		// 单选
		radioChange(val) {
			this.radioChange = val.index
			this.selectTableData = val
		},
		// 操作按钮事件
		getFuncBtn(btnEven) {
			if (btnEven.menuName === '新增') { // 新增
				this.dialogType = 'add'
				this.addDialog = true
			}
			if (btnEven.menuName != '新增') {
				if (Object.keys(this.selectTableData).length === 0) {
					this.$vmNews('请选择一条数据!', 'warning')
					return
				}
			}
			if (btnEven.menuName === '编辑') { // 编辑
				this.dialogType = 'edit'
				this.addDialog = true
				this.$refs.customForm.incomingParameters(this.selectTableData)
			}
			// 删除
			if (btnEven.menuName == '删除') {
				this.$delConfirm().then(() => {
					let billid = this.selectTableData.billid
					this.removeTableItem(billid)
				})
			}
		},
		// 保存
		handleAddDialogDetails() {
			this.$refs.customForm.$refs['ruleForm'].validate((valid) => {
				if (valid) { this.saveAddDialogDetails() } else {
					this.$message({ message: '请输入必填项', type: 'warning' }); return
				}
			})
		},
		async saveAddDialogDetails() {
			let params = {
				dataMain: {
					billid: this.dialogType == 'add' ? '00000000-0000-0000-0000-000000000000' :
						this.selectTableData.billid,
					...this.$refs.customForm.ruleForm,
				},

			}
			let res = await OtherSaveData(params)
			if (res.code === 1) {
				this.$vmNews('保存成功', 'success')
				this.addDialog = false
				this.getTableData()
			}
		},
		// 删除
		async removeTableItem(billid) {
			let params = {
				id: billid,
			}
			let res = await DelData(params)
			if (res.code === 1) {
				this.$vmNews('删除成功！', 'success')
				this.getTableList()
			}
		},
		// 启用/停用
		async lockState(row) {
			let params = { id: row.billid, state: row.state == 1 ? "true" : "false", }
			let res = await LockState(params)
			if (res.code === 1) {
				this.getTableList()
			}
		},
		//分页
		pageChange(model) {
			this.pageModel.page = model.page
			this.pageModel.limit = model.limit
			this.getTableList()
		}
	},
}
</script>
<style scoped lang='scss'>
::v-deep .el-form-item__error {
	padding: 0;
	top: 83%
}
</style>
